<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../bower_components/chopsui/chops-header.html">
<link rel="import" href="../../bower_components/chopsui/chops-login.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-location/iron-location.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">

<link rel="import" href="../../elements/som-header-styles.html">
<link rel="import" href="../../elements/som-utility-styles.html">

<link rel="import" href="../../elements/som-alert-view/som-alert-view.html">
<link rel="import" href="../../elements/som-drawer/som-drawer.html">

<link rel="import" href="../../elements/som-test-expectations/som-test-expectations.html">

<link rel="import" href="../../elements/pages/som-help.html">
<link rel="import" href="../../elements/pages/som-rotation-calendar.html">

<link rel="import" href="../../elements/tree-status/som-all-status/som-all-status.html">
<link rel="import" href="../../elements/tree-status/som-tree-status-view/som-tree-status-view.html">

<script src="../../bower_components/moment/min/moment.min.js"></script>
<script src="../../bower_components/moment-timezone/builds/moment-timezone-with-data.min.js"></script>

<dom-module id="som-app">
  <template>
    <style include="som-header-styles som-utility-styles">
      chops-header {
        --chops-header-text-color: #fff;
        top: 0;
        position: fixed;
        background-color: #000;
      }
      chops-login {
        --chops-login-link-color: #fff;
      }
      iron-icon {
        flex-shrink: 0;
      }
      #alertView {
        padding-bottom: 5em;
      }
      #headerRightContent {
        display: flex;
        align-items: center;
      }
      #refresh, #toggleDrawer {
        display: flex;
        width: 25px;
        height: 25px;
        padding: 0 2px;
        cursor: pointer;
      }
      #toggleDrawer {
        display: none;
        padding-right: 8px;
      }
      #lastUpdated, #username {
        text-align: right;
        padding-right: 1em;
      }
      #lastUpdatedTimeShort {
        display: none;
      }
      #somContainer {
        box-sizing: border-box;
        padding-top: 50px;
        width: 100%;
        min-height: 100%;
        display: flex;
      }
      #somContent {
        padding-left: 256px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
      }
      #somDrawerWrapper {
        width: 256px;
        height: 100%;
        overflow: auto;
        position: fixed;
        border-right: 1px solid #ccc;
        background: #fff;
        z-index: 1;
      }
      .error {
        margin-top: 0;
      }
      .page-body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        background: #fff;
        flex-grow: 1;
      }
      .page-body-padded {
        padding: 1em 16px;
      }
      @media (max-width: 1280px) {
        #somContent {
          padding-left: 0;
        }
        #somDrawerWrapper {
          display: none;
        }
        #somDrawerWrapper.opened {
          display: flex;
        }
        #somDrawerWrapper.opened + #somDrawerOverlay {
          position: fixed;
          content: '';
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
        }
        #toggleDrawer {
          display: flex;
        }
      }
      @media (max-width: 840px) {
        chops-header {
          --chops-header-title-theme: {
            display: none;
          };
        }
        #lastUpdatedTimeShort {
          /* Responsively display a shorter last updated time. */
          display: inline;
        }
        #lastUpdatedTime,
        #fetchingAlerts {
          display: none;
        }
      }
      .perfWarningBanner {
        background-color: #e75d54;
        font-size: 16px;
        padding: 0.5em;
        margin: 0.5em;
        text-align: center;
      }
    </style>
    <iron-location id="url" path="{{_path}}" url-space-regex="^(?!(/_ah/|/auth/))"></iron-location>
    <chops-header logo-src="[[_treeLogo]]" app-title="Sheriff-o-Matic">
      <iron-icon slot="before-header" id="toggleDrawer" on-tap="_toggleDrawer" icon="menu"></iron-icon>
      <div slot="subheader" id="treeTitle">
        &gt; [[_pathIdentifier]]
      </div>
      <template is="dom-if" if="[[_isPerfTree]]">
        <div class="perfWarningBanner">
          Perfbot sheriffs should also check <a target="_blank" href="https://ci.chromium.org/p/chrome/g/chrome.perf/console">the CI console</a> for issues not surfaced here.
        </div>
      </template>
      <div id="headerRightContent">
        <div id="lastUpdated" hidden$="[[!_showAlertView]]">
          Last updated: <span hidden$="[[!_lastUpdated]]" id="lastUpdatedTime">
            <span class="line">[[_lastUpdated.time]]</span>
            <span class="line">([[_lastUpdated.relativeTime]])</span>
          </span>
          <span hidden$="[[!_lastUpdated]]" id="lastUpdatedTimeShort" title$="[[_lastUpdated.time]]">
            [[_lastUpdated.relativeTime]]
          </span>
          <span hidden$="[[_lastUpdated]]" id="lastUpdatedUnknown">Unknown</span>
        </div>
        <chops-login id="username" user="[[user]]" logout-url="[[logoutUrl]]"></chops-login>
        <iron-icon id="refresh" on-tap="_refresh" icon="refresh"></iron-icon>
        <paper-spinner id="fetchingAlerts" active="[[_fetchingAlerts]]"></paper-spinner>
      </div>
    </chops-header>
    <div id="somContainer">
      <div id="somDrawerWrapper">
        <som-drawer
            id="drawer"
            path="{{_path}}"
            static-pages="[[_staticPages]]"
            link-style="{{linkStyle}}"
            tree="[[_tree]]"
            trees="{{_trees}}"
            collapse-by-default="{{collapseByDefault}}"
            ></som-drawer>
      </div>
      <div id="somDrawerOverlay" on-tap="_toggleDrawer"></div>
      <iron-pages id="somContent" attr-for-selected='id' selected="[[_selectedPage]]">
        <template is="dom-if" if="[[_showAlertView]]">
          <som-alert-view id="alertView" class="page-body"
            alerts-times="{{alertsTimes}}"
            examined-alert-key="[[_examinedAlertKey]]"
            fetching-alerts="{{_fetchingAlerts}}"
            trees="[[_trees]]"
            tree="[[_tree]]"
            user="[[user]]"
            link-style="[[linkStyle]]"
            collapse-by-default="[[collapseByDefault]]"></som-alert-view>
        </template>
        <som-help id="helpSOM" class="page-body page-body-padded"></som-help>
        <template is="dom-if" if="[[_showRotationCalendar]]">
          <som-rotation-calendar id="rotationCalendar" class="page-body page-body-padded"></som-rotation-calendar>
        </template>
        <template is="dom-if" if="[[_showTestExpectations]]">
          <som-test-expectations class="page-body" id="testExpectations" edited-test-name="{{_editedTestName}}"></som-test-expectations>
        </template>
        <template is="dom-if" if="[[_showTreeStatusAll]]">
          <som-all-status class="page-body page-body-padded" id="treeStatusAll" trees="[[_trees]]"></som-all-status>
        </template>
        <template is="dom-if" if="[[_showTreeStatusView]]">
          <som-tree-status-view class="page-body page-body-padded" id="treeStatusView" tree="[[_tree]]"></som-tree-status-view>
        </template>
      </iron-pages>
    </div>
  </template>
  <script src="som-app.js"></script>
</dom-module>
